<template>
<view class="page"> 
	<!-- 附近数据 -->
	<template v-if="isLogin&&type==1">
		<view class="h45">
			<view class="fix-wrap"> 
				<view class="h45 limit-tab">
					<view :class="['item',{'active':params.fk_status==0}]" @click="changeState(0)">
						<view class="name">未防控</view>
						<view class="active-line"></view>
					</view>
					<view :class="['item',{'active':params.fk_status==1}]" @click="changeState(1)">
						<view class="name">已防控</view>
						<view class="active-line"></view>
					</view> 
				</view>
			</view>
		</view>
		<view class="body">
			<view class="list-wrap">
				
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				
				<template v-else>
					<template v-if="list.length>0"> 	 
						<navigator open-type="navigate" :url="'/package_suishoupai/detail/detail?id='+item.id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="pic"><image :src="web_host+'/image/image?path='+item.file_path" mode="widthFix"></image></view>
							<view class="info">
								<view class="name">{{item.address}}</view>
								<view class="params"> 
									<view class="text">上传时间：{{item.create_time}}</view> 
								</view>
							</view>
						</navigator> 
						
						<loading :loadingState="loadingState"></loading>
						<navigator open-type="navigate" :url="'/package_suishoupai/map/map?type=1&fk_status='+params.fk_status+'&lat='+params.latitude+'&lng='+params.longitude" hover-class="none" class="map-btn">
							<image src="@/static/images/map_float.png" mode="widthFix"></image>
						</navigator>
					</template>
					<template v-else>
						<empty msg="暂无信息"></empty>
					</template>
					
				</template>
				 
				
			</view>
			
		</view>
	</template>
	
	<!-- 我的数据 -->
	<template v-if="isLogin&&type==2">
		<view class="h45">
			<view class="fix-wrap"> 
				<view class="h45 limit-tab">
					<view :class="['item',{'active':params.my_status==2}]" @click="changeMyState(2)">
						<view class="name">待审核</view>
						<view class="active-line"></view>
					</view>
					<view :class="['item',{'active':params.my_status==1}]" @click="changeMyState(1)">
						<view class="name">审核通过</view>
						<view class="active-line"></view>
					</view> 
					<view :class="['item',{'active':params.my_status==3}]" @click="changeMyState(3)">
						<view class="name">审核不通过</view>
						<view class="active-line"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="list-wrap">
				
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				
				<template v-else>
					<template v-if="list.length>0"> 	 
						<navigator open-type="navigate" :url="'/package_suishoupai/detail/detail?id='+item.id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="pic"><image :src="web_host+'/image/image?path='+item.file_path" mode="widthFix"></image></view>
							<view class="info">
								<view class="name">{{item.address}}</view>
								<view class="params"> 
									<view class="text">上传时间：{{item.create_time}}</view> 
								</view>
							</view>
						</navigator> 
						
						<loading :loadingState="loadingState"></loading>
						<navigator open-type="navigate" :url="'/package_suishoupai/map/map?type=2&status='+params.my_status" hover-class="none" class="map-btn">
							<image src="@/static/images/map_float.png" mode="widthFix"></image>
						</navigator>
					</template>
					<template v-else>
						<empty msg="暂无信息"></empty>
					</template>
					
				</template>
				 
				
			</view>
			
		</view>
	</template>
	   
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'
import {HTTP_REQUEST_URL} from '@/config.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				compelted:false
			},
			type:1,    // 1 附近数据   2 我的数据
			list:[],
			total:0,
			params:{
				page:1,
				fk_status:0,
				my_status:2,
				latitude:'',
				longitude:''
			},
			web_host:HTTP_REQUEST_URL
		}
	},
	onShow() {
		
	},
	async onLoad(params) {
		this.type=params.type;
		this.isLogin = await this.$loginState('check');
		 
		if(this.type==1){
			uni.setNavigationBarTitle({
				title:'附近数据'
			})
			if(this.isLogin){
				this.getLocal();
			}
			
		}else if(this.type==2){
			uni.setNavigationBarTitle({
				title:'我的数据'
			})
			if(this.isLogin){
				this.getMyData();
			}
			
		}
	},
	onReachBottom(){
		if(this.loadingState.completed){ 
			this.params.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.params.page++; 
				this.getNearData(this.params.latitude,this.params.longitude); 
			} 
		}	 
	},
	methods:{
		
		/***************附近数据**********************/
		
		// 获取当前位置信息
		getLocal: function() {		
			let _this = this;
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: function(res) {
					_this.params.latitude = res.latitude;
					_this.params.longitude = res.longitude; 
					 
					_this.getNearData(res.latitude,res.longitude);
				}
			});
		},
		
		// 获取附近数据列表
		getNearData:async function(lat,lng){
			let res =await this.$api.ssp_api.getNearData({
				page: this.params.page,
				lat: lat,
				lng: lng,
				fk_status: this.params.fk_status,
				is_app:1
			}) 
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length==this.total){
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}else{
				this.loadingState.default=false; 
			}
		},
		
		changeState:function(id){
			this.params.fk_status=id;
			this.list=[];
			this.params.page=1;
			this.loadingState.default=true;
			this.loadingState.loading=false;
			this.loadingState.completed=false;
			this.getNearData(this.params.latitude,this.params.longitude); 
		},
		
		/***************附近数据 end**********************/
		
		/***************我的数据**********************/
		
		// 获取我的数据列表
		getMyData:async function(lat,lng){
			let res =await this.$api.ssp_api.getMyData({
				page: this.params.page, 
				status: this.params.my_status,
				is_app:1
			}) 
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length==this.total){
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}else{
				this.loadingState.default=false; 
			}
		},
		
		changeMyState:function(id){
			this.params.my_status=id;
			this.list=[];
			this.params.page=1;
			this.loadingState.default=true;
			this.loadingState.loading=false;
			this.loadingState.completed=false;
			this.getMyData(); 
		},
		
		/***************我的数据 end**********************/
	},
	computed:{
		
	},
	components:{
		loading,
		empty
	}
}
</script>

<style scoped lang="less">
	.list-wrap{
		.item{ 
			display: flex;
			padding:20rpx;
			margin-top: 20rpx;
			background:#fff;
			.pic{
				width:25%;
				max-height: 150rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.info{
				flex-grow: 2;
				.name{
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}
				.params{
					font-size:30rpx;
					color:#999;
					.text{
						margin-bottom:8rpx;
					}
				}
			}
		}
	}
	
	.add-yj-btn{ 
		width: 96%;
		height:80rpx;
		margin:10rpx auto;
		background: #f00;
		border-radius: 10rpx;
		text-align: center;
		line-height:80rpx;
		color:#fff;
		font-size:32rpx;
	}
	.map-btn{
		position: fixed;
		right: 20rpx;
		bottom: 100rpx;
		width: 100rpx;
		box-shadow: 0 0 15rpx #666;
		border-radius: 50%;
		image{
			width: 100%;
		}
	}
</style>
